<template>
  <div class="tab-wrap">
    <ul class="cate-tab">
      <li
        class="cate"
        :class="{ 'tab-active': type == item.type }"
        v-for="item in cartType"
        :key="item.id"
        @click="setType(item.type)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
const cartType=[
    {
        id:0,
        name:'推荐',
        type:0
    },
    {
        id:1,
        name:'母婴',
        type:1
    },
    {
        id:2,
        name:'鞋包饰品',
        type:2
    },
    {
        id:3,
        name:'食品',
        type:3
    },
    {
        id:4,
        name:'数码家电',
        type:4
    },
    {
        id:5,
        name:'居家百货',
        type:5
    },
]
import {mapActions,mapState} from "vuex"
export default {
    name:"CateTab",
    data(){
        return {
            cartType,
            // type:0,
        }
    },
    computed:{
        ...mapState(['type'])
    },
    methods:{
        ...mapActions(['setType'])
    }
}
</script>
<style lang="scss" scoped>
  .tab-wrap {
    width: 100%;
    height: .6rem;
    background: red;
    overflow: hidden;
}

.cate-tab {
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #5D4285;
}

.cate {
    display: inline-block;
    width: .8rem;
    height: .7rem;
    color: #fff;
    line-height: .6rem;
    text-align: center;
}

.tab-active {
    background-color: #9A51FF;
}
</style>